<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" href="http://118.25.178.56/love.png">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <title>Love 微尘</title>
  <style>
    @import url(https://fonts.googleapis.com/css?family=Give+You+Glory);

    body {
      background-color: #000000;
      margin: 0;
      overflow: hidden;
    }
    canvas {
      cursor: pointer;
    }
    .start {
      color: white;
      font-family: 'Give You Glory', cursive;
      font-size: 40px;
      margin-top: -40px;
      position: absolute;
      text-align: center;
      top: 50%;
      width: 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
    }
  </style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="start">移动微尘老婆的手指</div>
<script>
  var MAX_PARTICLES = 500,
    MIN_ALPHA = 0.01,
    FPS = 30,

    canvas, context, stageWidth, stageHeight,

    mouseX = 0,
    mouseY = 0,
    lastX = 0,
    lastY = 0,
    active = false,
    particles = [];

  $(document).ready(init);
  init();

  function init() {
    canvas = document.getElementById('canvas'),
      context = canvas.getContext('2d'),
      resize();

    mouseX = stageWidth * 0.5;
    mouseY = stageHeight * 0.5;
    idleBurst();

    $(window).resize(resize);

    // PC
    $(window).on('mousemove', function(event) {
      if(!active) {
        $('.start').fadeOut(600);
      }
      active = true;
      lastX = mouseX;
      lastY = mouseY;
      mouseX = event.pageX;
      mouseY = event.pageY;
      if(particles.length < MAX_PARTICLES) createParticle();
    })
    $(window).on('mousedown', function(event) {
      createBurst();
    })

    // Mobile
    $(window).on('touchmove', function(event) {
      if(!active) {
        $('.start').fadeOut(600);
      }
      active = true;
      lastX = mouseX;
      lastY = mouseY;
      mouseX = event.changedTouches[0].pageX;
      mouseY = event.changedTouches[0].pageY;
      if(particles.length < MAX_PARTICLES) createParticle();
    })
    $(window).on('touchend', function(event) {
      if(active) {
        console.log(3);
        $('.start').fadeIn(600);
      }
      createBurst();
      console.log(2);
    })

    setInterval(onEnterFrame, 1000 / FPS);
  }

  function idleBurst() {
    if(!active) {
      createBurst();
      setTimeout(idleBurst, 1200);
    }
  }

  function resize() {
    stageWidth = $(window).width();
    stageHeight = $(window).height();
    canvas.width = stageWidth;
    canvas.height = stageHeight;
  }

  function createParticle(burst) {
    var particle = {
      size: 3 + (Math.random() * 8),
      bounce: Math.random(),
      color: "#"+((1<<24)*Math.random()|0).toString(16),
      alpha: 1,
      fade: 0.93 + (Math.random() * 0.05),
      x: 0,
      y: 0,
      vx: 0,
      vy: 0,
      rotate: Math.random() * 360,
      rotateDir: (Math.random > 0.5) ? 7 : -7
    };
    particle.x = mouseX;
    particle.y = mouseY;
    particle.vx = (burst) ? (0.5 - Math.random()) * 20 : lastX - mouseX;
    particle.vy = (burst) ? (0.5 - Math.random()) * 20 : lastY - mouseY;
    particles.push(particle);
  }

  function createBurst() {
    var i = 40;
    while(--i > -1 && particles.length < MAX_PARTICLES) {
      createParticle(true);
    }
  }

  function onEnterFrame() {
    context.clearRect(0, 0, stageWidth, stageHeight);
    /*context.fillStyle = '#000000';
    context.globalAlpha = 0.1;
    context.fillRect(0, 0, stageWidth, stageHeight);*/

    var points = 5;
    var step, halfStep, start, n, dx, dy, outerRadius, innerRadius, angle;
    var particle;
    var i = particles.length;
    while(--i > -1) {
      particle = particles[i];
      particle.x += particle.vx;
      particle.y += particle.vy;

      if(particle.x - particle.size < 0) {
        particle.x = particle.size;
        particle.vx = -particle.vx * particle.bounce;
      }
      else if(particle.x + particle.size > stageWidth) {
        particle.x = stageWidth - particle.size;
        particle.vx = -particle.vx * particle.bounce;
      }

      if(particle.y - particle.size < 0) {
        particle.y = particle.size;
        particle.vy = -particle.vy * particle.bounce;
      }
      else if(particle.y + particle.size > stageHeight) {
        particle.y = stageHeight - particle.size;
        particle.vy = -particle.vy * particle.bounce;
      }

      context.fillStyle = particle.color;
      context.globalAlpha = particle.alpha;
      context.beginPath();

      outerRadius = particle.size;
      innerRadius = particle.size * 0.3;
      step = (Math.PI * 2) / points;
      halfStep = step / 2;
      start = (particle.rotate / 180) * Math.PI;
      context.moveTo( particle.x + (Math.cos( start ) * outerRadius),
        particle.y - (Math.sin( start ) * outerRadius) );

      for(n = 1; n <= points; ++n) {
        dx = particle.x + Math.cos(start + (step * n) - halfStep) * innerRadius;
        dy = particle.y - Math.sin(start + (step * n) - halfStep) * innerRadius;
        context.lineTo( dx, dy );
        dx = particle.x + Math.cos(start + (step * n)) * outerRadius;
        dy = particle.y - Math.sin(start + (step * n)) * outerRadius;
        context.lineTo(dx, dy);
      }
      context.closePath();
      context.fill();

      particle.alpha *= particle.fade;
      particle.rotate += particle.rotateDir;

      if(particle.alpha <= MIN_ALPHA) {
        particles = particles.slice(0,i).concat(particles.slice(i+1));
      }
    }
  }
  $.ajax('/addClient', {
    method: 'post',
    data: {
      width: window.innerWidth,
      height: window.innerHeight,
      effectiveType: JSON.stringify(navigator.connection.effectiveType),
      client: JSON.stringify(navigator.userAgent)
    }
  })
</script>
</body>
</html>
